<template>
  <div v-infinite-scroll="loadMore" infinite-scroll-disabled="busy" infinite-scroll-distance="10">
    <!-- 头部导航    -->
    <div class="navtop">
      <ul>
        <li :class="{active:1==title}" @click="his(1)">待付款
          <span v-if="weidu.waitCount==''"></span>
           <span class="mones" v-else>{{weidu.waitCount}}</span>
        </li>
        <li :class="{active:2==title}" @click="his(2)">待发货
             <span v-if="weidu.waitSendCount==''"></span>
           <span class="mones" v-else>{{weidu.waitSendCount}}</span>
        </li>
        <li :class="{active:3==title}" @click="his(3)">已发货
           <span v-if="weidu.sendCount==''"></span>
           <span class="mones" v-else>{{weidu.sendCount}}</span>
        </li>
        <li :class="{active:4==title}" @click="his(4)">售后
          <span v-if="weidu.saleCount==''"></span>
           <span class="mones" v-else>{{weidu.saleCount}}</span>
        </li>
        <li :class="{active:5==title}" @click="his(5)">已完成
          <span v-if="weidu.finishCount==''"></span>
           <span class="mones" v-else>{{weidu.finishCount}}</span>
        </li>
      </ul>
    </div>
    <!-- 主体数据 -->
    <div class="msg">
      <!-- 待付款 一 -->
      <div class="first" v-if="this.title==1">
        <div v-if="this.list_nopay.length>0">
        <div class="dent_box" v-for="item in list_nopay" :key="item.orderId">
          <router-link to class="ent_a" @click.native="link()">
            <div class="dentbox_top">
              <img :src="item.headPhoto" alt>
              <span>{{item.consignee}}</span>
              <span>待付款</span>
            </div>
            <div
              class="dentbox_goods"
              v-for="goodsOrder in item.goodsList"
              :key="goodsOrder.goodsId"
            >
              <img :src="goodsOrder.goodsThum" alt>
              <div class="boxgoods_sun">
                <div class="boxgoods_text">{{goodsOrder.goodsName}}</div>
                <span>
                  ￥<span style="font-size:18px;">{{goodsOrder.goodsScreenPrice|amountMin100(2)}}</span>
                </span><span style="color:rgb(146, 146, 146);">&Chi;{{goodsOrder.goodsNumber}}</span>
              </div>
            </div>
            <div class="goods_bom" style="color:#2D2D2D;">共{{item.goodsNumber}}件商品 合计￥<span style="font-size:18px;">{{item.amount|amountMin100(2)}}</span>元</div>
          </router-link>
        </div>
       </div>
              <div v-else>
          <div>
            <img src="../../assets/images/暂无相关订单@2x.png" alt class="kong">
          </div>
          <div>暂时没有订单哦</div>
        </div>
      </div>
      <!-- 待发货 二 -->
      <div class="first" v-if="this.title==2">
        <div v-if="this.list_tobesend.length>0">
        <div v-for="item in list_tobesend" :key="item.orderId" class="next_box">
          <router-link to class="next_a">
            <div class="dentbox_top">
              <img :src="item.headPhoto" alt>
              <span>{{item.consignee}}</span>
              <span>待发货</span>
            </div>
            <div
              class="dentbox_goods"
              v-for="goodsOrder in item.goodsList"
              :key="goodsOrder.goodsId"
            >
              <img v-bind:src="goodsOrder.goodsThum" alt>
              <div class="boxgoods_sun">
                <div class="boxgoods_text">{{goodsOrder.goodsName}}</div>
                <span>
                  ￥<span style="font-size:18px;">{{goodsOrder.goodsScreenPrice |amountMin100(2)}}</span>
                </span>
                <span style="color:rgb(146, 146, 146);">&Chi;{{goodsOrder.goodsNumber}}</span>
              </div>
            </div>
          </router-link>
          <div class="next_bom">
            <span>
              共{{item.goodsNumber}}件商品，合计:
              ￥<span style="font-size:18px; color:black;">{{item.amount|amountMin100(2)}}</span>
            </span>
            <router-link :to="{path:'indent_fahuo?orderId='+item.id}" class="fahuo">立即发货</router-link>
          </div>
        </div>
          </div>
             <div v-else>
          <div>
            <img src="../../assets/images/暂无相关订单@2x.png" alt class="kong">
          </div>
          <div>暂时没有订单哦</div>
        </div>
      </div>
      <!-- 已发货 三 -->
      <div class="first" v-if="this.title==3">
        <div v-if="this.list_sended.length>0">
        <div class="dent_box" v-for="item in list_sended" :key="item.orderId">
          <router-link to class="ent_a" @click.native="link()">
            <div class="dentbox_top">
              <img :src="item.headPhoto" alt>
              <span>{{item.consignee}}</span>
              <span>已发货</span>
            </div>
            <div
              class="dentbox_goods"
              v-for="goodsOrder in item.goodsList"
              :key="goodsOrder.goodsId"
            >
              <img v-bind:src="goodsOrder.goodsThum" alt>
              <div class="boxgoods_sun">
                <div class="boxgoods_text">{{goodsOrder.goodsName}}</div>
                <span>
                  ￥<span style="font-size:18px;">{{goodsOrder.goodsScreenPrice|amountMin100(2)}}</span>
                </span>
                <span style="color:rgb(146, 146, 146);">&Chi;{{goodsOrder.goodsNumber}}</span>
              </div>
            </div>
            <div class="goods_bom">共{{item.goodsNumber}}件商品 合计<span style="font-size:18px;">{{item.amount|amountMin100(2)}}</span>元</div>
          </router-link>
        </div>
        </div>
               <div v-else>
          <div>
            <img src="../../assets/images/暂无相关订单@2x.png" alt class="kong">
          </div>
          <div>暂时没有订单哦</div>
        </div>
      </div>
      <!-- 售后 四-->
      <div class="first" v-if="this.title==4">
        <div v-if="this.list_saled.length>0">
          <div class="next_box" v-for="item in list_saled" :key="item.orderId">
            <router-link to class="next_a">
              <div class="dentbox_top">
                <img :src="item.headPhoto" alt>
                <!-- <img src="../../assets/personal/images/touxiang.png" alt> -->
                <span>{{item.consignee}}</span>
                <span></span>
              </div>
              <div
                class="dentbox_goods"
                v-for="goodsOrder in item.goodsList"
                :key="goodsOrder.goodsId"
              >
                <img v-bind:src="goodsOrder.goodsThum" alt>
                <div class="boxgoods_sun">
                  <div class="boxgoods_text">{{goodsOrder.goodsName}}</div>
                  <span>
                    ￥<span style="font-size:18px;">{{goodsOrder.goodsScreenPrice|amountMin100(2)}}</span>
                  </span>
                  <span style="color:rgb(146, 146, 146);">&Chi;{{goodsOrder.goodsNumber}}</span>
                </div>
              </div>
            </router-link>
            <div class="next_bom">
              <span>
                <img src="../../assets/images/仅退款@2x.png" alt class="tk_firstimg">
                <span style="font-size:15px">仅退款 退款关闭</span>
              </span>
              <!-- <router-link :to="{path:'me_tuikuan?id='+item.id}"> -->
                <router-link to>
                详情
                <img src="../../assets/images/前进(进入详情页).png" alt class="tk_lastimg">
              </router-link>
            </div>
          </div>
        </div>
        <div v-else>
          <div>
            <img src="../../assets/images/暂无相关订单@2x.png" alt class="kong">
          </div>
          <div>暂时没有订单哦</div>
        </div>
      </div>
    
      <!-- 已完成 五 -->
      <div class="first" v-if="this.title==5">
        <div v-if="this.list_finish.length>0">
          <div class="last_box" v-for="item in list_finish" :key="item.orderId">
            <div class="last_topbox">
              <span>{{item.orderSn}}</span>
              <span>成交于</span>
              <span>{{item.mtime | formatDate('YYYY-MM-DD hh:mm:ss')}}</span>
            </div>

            <div class="last_topnav">
              <img :src="item.headPhoto" alt>
              <span>{{item.consignee}}</span>
              <span>￥<span style="font-size:18px;">{{item.amount|amountMin100(2)}}</span>(含快递:0.00)</span>
            </div>
            <div
              class="dentbox_goods"
              v-for="goodsOrder in item.goodsList"
              :key="goodsOrder.goodsId"
            >
              <img v-bind:src="goodsOrder.goodsThum" alt>
              <div class="boxgoods_sun">
                <div class="boxgoods_text">{{goodsOrder.goodsName}}</div>
                <span style="font-size:15px; color:#929292;">
                  ￥<span>{{goodsOrder.goodsScreenPrice |amountMin100(2)}}&Chi;{{goodsOrder.goodsNumber}}</span>
                </span>
              </div>
            </div>
            <div class="last_for">
              <img src="../../assets/images/定位@2x.png" alt>
              <div>{{item.consignee}}，{{item.mobile}}，{{item.shippingAddress}}</div>
            </div>
          </div>
        </div>

        <div v-else>
          <div>
            <img src="../../assets/images/暂无相关订单@2x.png" alt class="kong">
          </div>
          <div>暂时没有订单哦</div>
        </div>
      </div>
    </div>
        <!-- <div v-if="this.list_nopay.length<1"></div>
        <div v-if-else="this.list_tobesend.length<1"></div>
        <div v-if-else="this.list_sended.length<1"></div>
        <div v-if-else="this.list_saled.length<1"></div>
        <div v-if-else="this.list_finish.length<1"></div> -->
        <loadingtmp :busy="busy" :datalength="mins.length" :loadall="loadall" style="bottom:50px;;
    position: fixed;
    background: white;
    width: 100%;;" id="bomshow"></loadingtmp>
    <navfooter :pageName="pageName"></navfooter>
   
  </div>
  
</template>
<script>
import navfooter from "@/views/merchant/footer/me_footer";
import loadingtmp from "@/components/load/loading";
export default {
  components: {
    navfooter,
    loadingtmp,
  },
  data() {
    return {
      busy:false,
      loadall:false,
      pageName: "me_indent",
      title: 1,
      page: 1,
      mins:[1,2],
      // pageSize: 10,
      list_nopay: [],
      list_tobesend: [],
      list_sended: [],
      list_saled: [],
      list_finish: [],
      busy: false,
      loadall: false,
      goodsShop: [],
      weidu:'',
      pageSize:10
      // list:[1]
    };
  },
  created() {},
  mounted() {
   
    // this.list_fetch();
    this.mens()
    
    if(this.$route.query.id==undefined||this.$route.query.id==null||this.$route.query.id==''){
      this.title=1
    }else{
     this.title=this.$route.query.id
    }
    this.handleScroll();
  },
  created() {
     
  },
  methods: {
     loadMore(){
      console.log('底部')
        this.busy=false
        this.loadall=false
         if(this.page>0){
              setTimeout(() => {
          
          this.list_fetch(this.page>1);
        }, 500);
         }else{
                this.busy=false
                 this.loadall=true
           return false;
         }
      
    },
     mens(){
          let url = this.APIURL_PREFIX + "/api/wap/OrderCount";
      this.$http
        .get(url)
        .then(res => {
          console.log(res)
          this.weidu=res.data.data
          console.log(this.weidu)
        })
     },
    link() {
      console.log(2222);
    },
   
    handleScroll() {
    //  let vm = this;
    //   window.onscroll = function() {
    //     var scrollTop =
    //       document.documentElement.scrollTop || document.body.scrollTop;
    //     var windowHeight =
    //       document.documentElement.clientHeight || document.body.clientHeight;
    //     var scrollHeight =
    //       document.documentElement.scrollHeight || document.body.scrollHeight;
    //     if (scrollTop + windowHeight == scrollHeight) {
    //       // console.log(4444);
         
    //            vm.page++;
    //       vm.list_fetch();
          
         
    //     }
    //   }
    },
    his(i) {
      this.title = i;
      $("html,body").animate({ scrollTop: 0 }, 0);
      // this.page=1
      // this.mins=[]
      // console.log(this.title,i)
    },
    list_fetch() {
      let flag=this.page>1
      console.log(this.page)
      this.orderStatus=this.$route.query.id
      let url = this.APIURL_PREFIX + "/api/wap/orderListForCompany";
      this.$http
        .get(url, {
          params: { page: this.page, rows: this.pageSize, payStatus: 0 }
        })
        .then(res => {
            let arRes=res.data.data
             if(res.data.data.length<1||res.data.data==''){
                    this.busy=false
                 this.loadall=true
               }
            if (flag) {
                    this.list_nopay = this.list_nopay.concat(res.data.data);
                } else {
                    this.list_nopay = res.data.data;
                }
            
        });
      this.$http
        .get(url, {
          params: {
            page: this.page,
            rows: this.pageSize,
            payStatus: 1,
            orderStatus: 0
          }
        })
        .then(res => {
             let arRes=res.data.data
                  if(res.data.data.length<1||res.data.data==''){
                    console.log('数据为空')
                    this.busy=false
                 this.loadall=true
                 
               }
           if (flag) {
                    this.list_tobesend = this.list_tobesend.concat(res.data.data);
                } else {
                    this.list_tobesend = res.data.data;
                }
             
                    
        });
      this.$http
        .get(url, {
          params: {
            page: this.page,
            rows: this.pageSize,
            payStatus: 1,
            orderStatus: 1
          }
        })
        .then(res => {
          // this.list_sended = this.list_sended.concat(res.data.data);
               let arRes=res.data.data
                    if(res.data.data.length<1||res.data.data==''){
                    // console.log('数据为空')
                    this.busy=false
                 this.loadall=true
                //  this.mins.push(1)
                // $('#bomshow').hide()
                  
               }
               if(res.data.data.length<10){
            this.busy=false
            this.loadall=true
          }
           if (flag) {
                    this.list_sended = this.list_sended.concat(res.data.data);
                } else {
                    this.list_sended = res.data.data;
                }
        });
      this.$http
        .get(url, {
          params: {
            page: this.page,
            rows: this.pageSize,
            payStatus: 1,
            orderStatus: 3
          }
        })
        .then(res => {
          // this.list_saled = this.list_saled.concat(res.data.data);

            let arRes=res.data.data
                   if(res.data.data.length<1||res.data.data==''){
                    // console.log('数据为空')
                    this.busy=false
                 this.loadall=true
                 
               }
           if (flag) {
                    this.list_saled = this.list_saled.concat(res.data.data);
                } else {
                    this.list_saled = res.data.data;
                }
        });
      this.$http
        .get(url, {
          params: {
            page: this.page,
            rows: this.pageSize,
            payStatus: 1,
            orderStatus: 2
          }
        })
        .then(res => {
          // this.list_finish = this.list_finish.concat(res.data.data);
               let arRes=res.data.data
                   if(res.data.data.length<1||res.data.data==''){
                    // console.log('数据为空')
                    this.busy=false
                 this.loadall=true
                 
               }
           if (flag) {
                    this.list_finish = this.list_finish.concat(res.data.data);
                } else {
                    this.list_finish = res.data.data;
                }
        });
        
       this.page++
    }
  }
};
</script>

<style scoped>
@import "../../assets/personal/css/me_indent.css";
</style>
